<#include "/common/template.ftl">
<#include "/course/forecastCourse/classRoomAddress.ftl">
<#include "/course/forecastCourse/forecastCourseContentOutline.ftl">
<#include "/course/forecastCourse/teacherIntroduction.ftl">
<@template csses=["forecastCourseDetail"] jses=["forecastCourseDetail"]>
	<div class=""  style="width:990px; height:985px; margin:0px auto; padding-top:10px; background-color:#ffffff">
		<div class=""  style="width:978px; height:950px; border-width:1px; border-color:#DDDDDD; border-style:solid; margin:0px auto; background-color:#ffffff">
			<div class=""  style="width:978px; height:32px; margin-left:auto; margin-right:auto; background-color:#A4E90C">
				<p style="font-size:20px; color:#000000; font-weight:bold; padding-top:7px; padding-left:20px;">课程详情</p>
			</div>
			<div style="width:968px; height:340px; margin-top:10px; margin-left:5px;">
				<div style="float:left; width:355px; height:300px;">
					<div style="width:300px; height:295px; float:left; margin-left:50px; margin-top:20px; font-size:16px; color:#333333;">
						<p style="font-weight:bold;">三角函数及其应用</p>
						<p>
							<span>讲师：</span>
							<span>张撼</span>
						</p>
						<p>
							<span>数学</span>
							<span style="margin-left:15px;">初二</span>
						</p>
						<p>
							<span>学费：</span>
							<span>￥20.00 （线上）<br/></span>
							<span style="margin-left:52px;">￥50.00 （线下）</span>
						</p>
						<p>2015/05/03 18:30~20:30</p>
						<p>
							<span>上课地点：</span>
							<span>徐汇区、上师大、东区二教上师大、东区二教</span>
						</p>
						<form class="" action="${basePath}/purchaseStepOne" method="get">
							<input style="display:none;" type="text" name="forecastCourseId" value="abcdefg123456789">
							<label class="radio inline"  style="margin:0 0 12px 0;">
								<input type="radio" name="onOroffLine" value="online" checked>线上
							</label>
							<label class="radio inline" style="margin:0 5px 12px 0;">
								<input type="radio" name="onOroffLine" value="offline">线下
							</label>
							<div>
								<button class="btn btn-primary" style="float:left;">我要报名</button>
								<a title="已报名人数" style="margin-left:25px;  margin-top:10px; float:left;"><i class="icon-user" style="margin-right:5px;"></i>20</a>
								<a href="${basePath}/studentOuterShoppingCart?forecastCourseId=abcdefg123456789&onOroffLine=online" style="color:#FF5000; margin-top:10px; font-size:16px; float:right;">加入购物车》</a>
							</div>
						</form>
					</div>
				</div>
				
				<div style="float:left; margin-left:10px; width:598px; height:300px;">
					<img class="icon_previous icon_arrow" onclick="previousImg('outerImgGallery', 'insideImgGallery')" src="${basePath}/static/images/icon/arrow-left.png"/>
                    <img class="icon_next icon_arrow" onclick="nextImg('outerImgGallery', 'insideImgGallery')" src="${basePath}/static/images/icon/arrow-right.png"/>
					
					
					<div class="outerImgGallery" id="outerImgGallery">
						<div id="insideImgGallery" style="float:left; width:1674px;">
							<div style="float:left; width:558px; float:left;">
								<img style="height:280px; width:554px; padding:2px;" src="${basePath}/static/images/image01.jpg"/>
								<div class="img_title">
									<a href="#">我的未来不是梦</a>
								</div>
							</div>
							<div style="float:left; width:558px; float:left;">
								<img style="height:280px; width:554px; padding:2px;" src="${basePath}/static/images/image02.jpg"/>
								<div class="img_title">
									<a href="#">活着就是为了改变世界</a>
								</div>
							</div>
							<div style="float:left; width:558px; float:left;">
								<img style="height:280px; width:554px; padding:2px;" src="${basePath}/static/images/image03.jpg"/>
								<div class="img_title">
									<a href="#">你是要一辈子码代码，还是要勇敢走出来改变世界</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<hr class="large_hr_line"/>
			<div class="forecast_course_detail">
				<div class="tabbable tabs-left">
					<ul class="nav nav-tabs f_c_d_l_ul">
						<li class="active f_c_d_common_li" id="offCRaddressLi" onclick="showFCDRelativeContent('offCRaddressLi','offCRaddress')">
							<a style="border:none; color:#000000; width:145px; font-weight:bold; margin:35px auto 0 0px; padding:6px 0 6px 10px;">上课地点（线下）</a>
						</li>
						<li class="f_c_d_li_line"></li>
						
						<li class="f_c_d_common_li" id="courseContentOutlineLi" onclick="showFCDRelativeContent('courseContentOutlineLi','courseContentOutline')">
							<a style="border:none; color:#000000; width:145px; font-weight:bold; margin:25px auto 0 0px; padding:6px 0 6px 10px;">课程内容概要</a>
						</li>
						<li class="f_c_d_li_line"></li>
						
						<li class="f_c_d_common_li" id="teacherIntroductionLi" onclick="showFCDRelativeContent('teacherIntroductionLi','teacherIntroduction')">
							<a style="border:none; color:#000000; width:145px; font-weight:bold; margin:25px auto 0 0px; padding:6px 0 6px 10px;">老师介绍</a>
						</li>
						<li class="f_c_d_li_line"></li>
					</ul>
					
					<div class="tab-content" id="offCRaddress" style="width:690px; margin-top:45px;">
						<@classRoomAddress></@classRoomAddress>
					</div>
					
					<div class="tab-content hide" id="courseContentOutline" style="width:690px; margin-top:45px;">
						<@forecastCourseContentOutline></@forecastCourseContentOutline>
					</div>
					
					<div class="tab-content hide" id="teacherIntroduction" style="width:690px; margin-top:45px;">
						<@teacherIntroduction></@teacherIntroduction>
					</div>
				</div>
			</div>
			
			
		</div>
	</div>
</@template>